<template>
	<div class="seal-generator">
		<!-- 头部操作区域 -->
		<div class="header-area">
			<div class="page-title">
				<h2>{{ sealName }}生成器</h2>
				<p class="subtitle">自定义配置生成专业印章</p>
			</div>
			<div class="seal-actions">
				<el-button type="success" @click="createChineseSeal" :icon="showEnglish ? '' : 'Check'" size="small">
					{{ showEnglish ? '切换为中文印章' : '生成中文印章' }}
				</el-button>
				<el-button type="info" @click="createBilingualSeal" :icon="showEnglish ? 'Check' : ''" size="small">
					{{ showEnglish ? '生成中英文印章' : '切换为中英文印章' }}
				</el-button>
				<el-divider direction="vertical" />
				<el-button type="primary" @click="handleConfirm" size="small" :disabled="!sealDataURL"> 确认生成 </el-button>
			</div>
		</div>

		<!-- 主体内容区域 -->
		<div class="main-content">
			<!-- 左侧配置区域 -->
			<div class="config-area">
				<el-tabs v-model="activeTab" class="config-tabs">
					<!-- 基础信息标签页 -->
					<el-tab-pane label="基础信息" name="basic">
						<div class="tab-content">
							<!-- 公司信息 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">🏢</i>
									<span>公司信息</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">公司名称</label>
										<el-input v-model="companyName" @input="updateSeal" placeholder="请输入公司名称" clearable size="small" />
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">字体</label>
											<el-select v-model="companyFont" @change="updateSeal" size="small">
												<el-option v-for="font in fontList" :key="font.name" :label="font.displayName" :value="font.name" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字号</label>
											<el-input-number v-model="companyFontSize" :min="10" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">粗细</label>
											<el-select v-model="companyFontWeight" @change="updateSeal" size="small">
												<el-option label="默认" value="normal" />
												<el-option label="加粗" value="bold" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字间距</label>
											<el-input-number v-model="companyFontGap" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>

							<!-- 英文信息 (仅在双语模式显示) -->
							<div class="config-section" v-show="showEnglish">
								<div class="section-title">
									<i class="section-icon">🔤</i>
									<span>英文信息</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">英文名称</label>
										<el-input v-model="englishName" @input="updateSeal" placeholder="请输入英文名称" clearable size="small" />
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">字体</label>
											<el-select v-model="englishFont" @change="updateSeal" size="small">
												<el-option v-for="font in fontList" :key="font.name" :label="font.name" :value="font.name" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字号</label>
											<el-input-number v-model="englishFontSize" :min="10" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>

							<!-- 章名设置 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">📝</i>
									<span>章名设置</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">章名内容</label>
										<el-input v-model="sealText" @input="updateSeal" placeholder="请输入章名" clearable size="small" />
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">字体</label>
											<el-select v-model="sealTextFont" @change="updateSeal" size="small">
												<el-option v-for="font in fontList" :key="font.name" :label="font.name" :value="font.name" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字号</label>
											<el-input-number v-model="sealTextFontSize" :min="10" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>

							<!-- 中心内容 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">⭐</i>
									<span>中心内容</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">中心内容</label>
										<el-input v-model="centerContent" @input="updateSeal" placeholder="请输入中心内容" clearable size="small" />
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">字体</label>
											<el-select v-model="centerFont" @change="updateSeal" size="small">
												<el-option v-for="font in fontList" :key="font.name" :label="font.name" :value="font.name" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字号</label>
											<el-input-number v-model="centerFontSize" :min="10" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<!-- 高级设置标签页 -->
					<el-tab-pane label="高级设置" name="advanced">
						<div class="tab-content">
							<!-- 位置调整 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">📐</i>
									<span>位置调整</span>
								</div>
								<div class="config-group">
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">公司字边距</label>
											<el-input-number v-model="companyFontBorder" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
										<div class="config-item">
											<label class="config-label">英文字边距</label>
											<el-input-number v-model="englishFontBorder" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">章名上下</label>
											<el-input-number v-model="sealTextTop" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
										<div class="config-item">
											<label class="config-label">章名左右</label>
											<el-input-number v-model="sealTextLeft" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">中心上下</label>
											<el-input-number v-model="centerTop" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
										<div class="config-item">
											<label class="config-label">中心左右</label>
											<el-input-number v-model="centerLeft" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>

							<!-- 字体权重 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">🔤</i>
									<span>字体权重</span>
								</div>
								<div class="config-group">
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">英文粗细</label>
											<el-select v-model="englishFontWeight" @change="updateSeal" size="small">
												<el-option label="默认" value="normal" />
												<el-option label="加粗" value="bold" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">章名粗细</label>
											<el-select v-model="sealTextFontWeight" @change="updateSeal" size="small">
												<el-option label="默认" value="normal" />
												<el-option label="加粗" value="bold" />
											</el-select>
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">中心粗细</label>
											<el-select v-model="centerFontWeight" @change="updateSeal" size="small">
												<el-option label="默认" value="normal" />
												<el-option label="加粗" value="bold" />
											</el-select>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<!-- 防伪设置标签页 -->
					<el-tab-pane label="防伪设置" name="security">
						<div class="tab-content">
							<!-- 防伪码 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">🔒</i>
									<span>防伪码设置</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">防伪码</label>
										<el-input v-model="securityCode" @input="updateSeal" placeholder="请输入防伪码" clearable size="small" />
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">字体</label>
											<el-select v-model="securityFont" @change="updateSeal" size="small">
												<el-option v-for="font in fontList" :key="font.name" :label="font.name" :value="font.name" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字号</label>
											<el-input-number v-model="securityFontSize" :min="10" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">粗细</label>
											<el-select v-model="securityFontWeight" @change="updateSeal" size="small">
												<el-option label="默认" value="normal" />
												<el-option label="加粗" value="bold" />
											</el-select>
										</div>
										<div class="config-item">
											<label class="config-label">字间距</label>
											<el-input-number v-model="securityFontGap" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">矫正</label>
											<el-input-number v-model="securityRotate" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
										<div class="config-item">
											<label class="config-label">字边距</label>
											<el-input-number v-model="securityBorder" :min="-100" :max="100" @change="updateSeal" size="small" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>

					<!-- 样式设置标签页 -->
					<el-tab-pane label="样式效果" name="style">
						<div class="tab-content">
							<!-- 边框设置 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">⭕</i>
									<span>边框设置</span>
								</div>
								<div class="config-group">
									<div class="config-row">
										<div class="config-item">
											<label class="config-label">外边线</label>
											<el-input-number v-model="outerBorder" :min="1" :max="6" @change="updateSeal" size="small" />
										</div>
										<div class="config-item">
											<label class="config-label">内边线</label>
											<el-input-number v-model="innerBorder" :min="1" :max="6" @change="updateSeal" size="small" />
										</div>
									</div>
									<div class="config-item">
										<el-checkbox v-model="showInnerBorder" @change="updateSeal">显示内边框</el-checkbox>
									</div>
								</div>
							</div>

							<!-- 颜色和尺寸 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">🎨</i>
									<span>颜色尺寸</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">印章颜色</label>
										<el-color-picker v-model="sealColor" @change="updateSeal" size="small" />
									</div>
									<div class="config-item">
										<label class="config-label">印章尺寸</label>
										<el-select v-model="sealSize" @change="updateSealSize" size="small">
											<el-option v-for="size in sealSizeOptions" :key="size.size" :label="`${size.size}px`" :value="size.size" />
										</el-select>
									</div>
								</div>
							</div>

							<!-- 特效设置 -->
							<div class="config-section">
								<div class="section-title">
									<i class="section-icon">✨</i>
									<span>特效设置</span>
								</div>
								<div class="config-group">
									<div class="config-item">
										<label class="config-label">老化程度</label>
										<el-input-number v-model="aging" :min="0" :max="100" @change="updateSeal" size="small" />
									</div>
									<div class="config-item">
										<el-checkbox v-model="showAging" @change="updateSeal">启用印章老化效果</el-checkbox>
									</div>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>

			<!-- 右侧预览区域 -->
			<div class="preview-area">
				<div class="preview-content">
					<div class="preview-header">
						<h3>印章预览</h3>
						<div class="preview-info">
							<span class="info-item">尺寸: {{ sealSize }}×{{ sealSize }}px</span>
							<span class="info-item">模式: {{ showEnglish ? '中英文印章' : '中文印章' }}</span>
							<span v-if="showSealGenerated" class="info-item" style="color: #67c23a">印章已生成</span>
						</div>
					</div>
					<div class="preview-container" ref="previewContainer">
						<div class="canvas-wrapper">
							<canvas ref="sealCanvas" :width="sealSize" :height="sealSize"></canvas>
						</div>
					</div>
					<div class="preview-footer">
						<div class="operation-tips">
							<p v-if="showSealGenerated" class="tip-text success">
								<i class="el-icon-success"></i>
								印章已生成，可以下载或点击"确认生成"完成创建
								<span style="color: #409eff; cursor: pointer" @click="downloadSeal">下载印章</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';

// 定义组件的Props和Emits
interface Props {
	modelValue?: SealData;
	visible?: boolean;
	sealName?: string;
	sealType?: string;
}

interface SealData {
	id?: string;
	name: string;
	type: 'chinese' | 'bilingual';
	companyName: string;
	sealText: string;
	imageData?: string;
	createdAt?: string;
	updatedAt?: string;
}

const props = withDefaults(defineProps<Props>(), {
	visible: true,
	sealName: '',
	sealType: '公章',
});

const emit = defineEmits<{
	'update:modelValue': [value: SealData];
	confirm: [value: SealData];
	cancel: [];
	change: [value: SealData];
}>();

// 基础配置
const sealName = ref('圆形印章');
const showEnglish = ref(false);
const activeTab = ref('basic');

// 字体列表 - 使用系统中实际可用的字体
const fontList = [
	{ name: 'PingFang SC', displayName: '苹方' },
	{ name: 'Hiragino Sans GB', displayName: '冬青黑体' },
	{ name: 'STHeiti', displayName: '华文黑体' },
	{ name: 'Helvetica Neue', displayName: 'Helvetica' },
	{ name: 'Arial', displayName: 'Arial' },
	{ name: 'Times New Roman', displayName: 'Times New Roman' },
	{ name: 'Courier New', displayName: 'Courier New' },
	{ name: 'Verdana', displayName: 'Verdana' },
	{ name: 'Georgia', displayName: 'Georgia' },
	{ name: 'Trebuchet MS', displayName: 'Trebuchet MS' },
];

// 公司配置
const companyName = ref('xxx科技有限公司');
const companyFont = ref('PingFang SC');
const companyFontSize = ref(20);
const companyFontWeight = ref('bold');
const companyFontGap = ref(0);
const companyFontBorder = ref(0);

// 英文配置
const englishName = ref('TESTTESTTESTTESTTESTTESTTEST');
const englishFont = ref('Arial');
const englishFontSize = ref(10);
const englishFontWeight = ref('bold');
const englishFontBorder = ref(0);

// 章名配置
const sealText = ref('专用章');
const sealTextFont = ref('PingFang SC');
const sealTextFontSize = ref(16);
const sealTextFontWeight = ref('bold');
const sealTextTop = ref(0);
const sealTextLeft = ref(0);

// 中心内容配置
const centerContent = ref('★');
const centerFont = ref('PingFang SC');
const centerFontSize = ref(50);
const centerFontWeight = ref('bold');
const centerTop = ref(0);
const centerLeft = ref(0);

// 防伪码配置
const securityCode = ref('1234567890123');
const securityFont = ref('STHeiti');
const securityFontSize = ref(10);
const securityFontWeight = ref('bold');
const securityFontGap = ref(0);
const securityRotate = ref(0);
const securityBorder = ref(0);

// 样式配置
const outerBorder = ref(2);
const innerBorder = ref(1);
const showInnerBorder = ref(true);
const sealColor = ref('rgb(255,0,0)');
const aging = ref(90);
const showAging = ref(false);

// 尺寸配置
const sealSizeOptions = [
	{ size: 80 },
	{ size: 128 },
	{ size: 160 },
	{ size: 240 },
	{ size: 256 },
	{ size: 320 },
	{ size: 480 },
	{ size: 512 },
	{ size: 640 },
];
const sealSize = ref(160);
const sealScale = ref(1);

// DOM引用
const sealCanvas = ref<HTMLCanvasElement>();
const previewContainer = ref<HTMLDivElement>();

// 生成的印章数据
const sealDataURL = ref('');

//控制是否展示已完成和下载按钮
const showSealGenerated = ref(false);
// 计算当前印章数据 - 简化版本
const currentSealData = computed(
	(): SealData => ({
		name: sealName.value,
		type: showEnglish.value ? 'bilingual' : 'chinese',
		companyName: companyName.value,
		sealText: sealText.value,
		imageData: sealDataURL.value,
		updatedAt: new Date().toISOString(),
	})
);

// 注释掉实时数据更新，改为手动触发
// watch(
// 	currentSealData,
// 	(newData) => {
// 		emit('update:modelValue', newData);
// 		emit('change', newData);
// 	},
// 	{ deep: true }
// );

// 初始化数据
const initializeData = () => {
	// 根据传入的印章名称和类型设置默认值
	if (props.sealName) {
		companyName.value = props.sealName;
	}

	// 根据印章类型设置章名
	if (props.sealType) {
		switch (props.sealType) {
			case '公章':
				sealText.value = '公章';
				break;
			case '财务章':
				sealText.value = '财务专用章';
				break;
			case '合同章':
				sealText.value = '合同专用章';
				break;
			case '法人章':
				sealText.value = '法人章';
				break;
			case '部门章':
				sealText.value = '部门章';
				break;
			case '发票章':
				sealText.value = '发票专用章';
				break;
			case '人事章':
				sealText.value = '人事专用章';
				break;
			case '其他章':
				sealText.value = '专用章';
				break;
			default:
				sealText.value = '专用章';
		}
	}

	if (props.modelValue) {
		const data = props.modelValue;
		sealName.value = data.name || '圆形印章';
		showEnglish.value = data.type === 'bilingual';
		companyName.value = data.companyName || companyName.value;
		sealText.value = data.sealText || sealText.value;

		// 如果有图片数据，设置到sealDataURL
		if (data.imageData) {
			sealDataURL.value = data.imageData;
		}
	}
};

// 更新印章尺寸
const updateSealSize = () => {
	sealScale.value = sealSize.value / 160;
	updateSeal();
};

// 更新印章
const updateSeal = () => {
	if (showEnglish.value) {
		createBilingualSeal();
	} else {
		createChineseSeal();
	}
};

// 创建中文印章
const createChineseSeal = () => {
	showEnglish.value = false;
	nextTick(() => {
		drawChineseSeal();
	});
};

// 创建中英文印章
const createBilingualSeal = () => {
	showEnglish.value = true;
	nextTick(() => {
		drawBilingualSeal();
	});
};

// 提取RGB值
const extractRGBValues = (rgbString: string): number[] => {
	const values = rgbString.match(/\d+/g);
	return values ? values.map(Number) : [255, 0, 0];
};

// 绘制噪点
const drawNoisy = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => {
	if (!showAging.value) return;

	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	const data = imageData.data;
	const rgb = extractRGBValues(sealColor.value);

	for (let i = 0; i < data.length; i += Math.floor(Math.random() * (4 + (aging.value / 10) * sealScale.value))) {
		const r = data[i];
		const g = data[i + 1];
		const b = data[i + 2];

		if (r === rgb[0] && g === rgb[1] && b === rgb[2]) {
			data[i] = rgb[0];
			data[i + 1] = rgb[1];
			data[i + 2] = rgb[2];
			data[i + 3] = Math.floor(Math.random() * 255);
		}
	}

	ctx.putImageData(imageData, 0, 0);
};

// 绘制中心内容
const drawCenterContent = (ctx: CanvasRenderingContext2D, centerX: number, centerY: number) => {
	ctx.save();
	ctx.font = `${centerFontWeight.value} ${centerFontSize.value * sealScale.value}px ${centerFont.value}`;
	ctx.fillStyle = sealColor.value;
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(centerContent.value, centerX + centerLeft.value * sealScale.value, centerY + centerTop.value * sealScale.value);
	ctx.restore();
};

// 绘制中文印章
const drawChineseSeal = () => {
	if (!sealCanvas.value) return;

	const canvas = sealCanvas.value;
	const ctx = canvas.getContext('2d');
	if (!ctx) return;

	// 清除画布
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	const centerX = canvas.width / 2;
	const centerY = canvas.height / 2;

	// 绘制外边框
	ctx.lineWidth = outerBorder.value * sealScale.value;
	ctx.strokeStyle = sealColor.value;
	ctx.beginPath();
	ctx.arc(centerX, centerY, 78 * sealScale.value, 0, Math.PI * 2);
	ctx.stroke();
	ctx.save();

	// 绘制内边框
	if (showInnerBorder.value) {
		ctx.lineWidth = innerBorder.value * sealScale.value;
		ctx.strokeStyle = sealColor.value;
		ctx.beginPath();
		ctx.arc(centerX, centerY, 75 * sealScale.value, 0, Math.PI * 2);
		ctx.stroke();
		ctx.save();
	}

	// 绘制中心内容
	drawCenterContent(ctx, centerX, centerY);

	// 绘制章名
	ctx.font = `${sealTextFontWeight.value} ${sealTextFontSize.value * sealScale.value}px ${sealTextFont.value}`;
	ctx.textBaseline = 'middle';
	ctx.textAlign = 'center';
	ctx.fillStyle = sealColor.value;
	ctx.fillText(sealText.value, centerX + sealTextLeft.value, centerY + 53 * sealScale.value + sealTextTop.value);

	// 绘制公司名称 (环形文字)
	ctx.translate(centerX, centerY);
	ctx.font = `${companyFontWeight.value} ${companyFontSize.value * sealScale.value}px ${companyFont.value}`;

	const companyChars = companyName.value.split('');
	const charCount = companyChars.length;
	const fontGap = companyFontGap.value > 0 ? companyFontGap.value / 100 : 0;
	const angle = (4 * Math.PI) / (3 * (charCount - (1 - companyFontGap.value * (0.25 + fontGap))));

	for (let i = 0; i < charCount; i++) {
		const char = companyChars[i];
		if (i === 0) {
			ctx.rotate(((5 + companyFontGap.value / 10) * Math.PI) / 6);
		} else {
			ctx.rotate(angle);
		}
		ctx.save();
		ctx.translate(64 * sealScale.value + companyFontBorder.value, 0);
		ctx.rotate(Math.PI / 2);
		ctx.fillText(char, 0, 5);
		ctx.restore();
	}

	// 绘制防伪码
	ctx.font = `${securityFontWeight.value} ${securityFontSize.value * sealScale.value}px ${securityFont.value}`;
	const securityChars = securityCode.value.split('');
	const securityCount = securityChars.length;
	const securityAngle = (-4 * Math.PI) / ((8.6 - securityFontGap.value * 0.4) * (securityCount - 1));

	for (let i = 0; i < securityCount; i++) {
		const char = securityChars[i];
		if (i === 0) {
			ctx.rotate(((3.4 + securityRotate.value * 0.05) * Math.PI) / 6);
		} else {
			ctx.rotate(securityAngle);
		}
		ctx.save();
		ctx.translate(64 * sealScale.value + securityBorder.value, 0);
		ctx.rotate((-90 * Math.PI) / 180);
		ctx.fillText(char, 0, 5);
		ctx.restore();
	}

	ctx.restore();
	drawNoisy(ctx, canvas);

	// 生成图片数据
	sealDataURL.value = canvas.toDataURL('image/png');

	// 仅更新图片数据，不触发外部事件
	// nextTick(() => {
	// 	emit('change', currentSealData.value);
	// });
};

// 绘制中英文印章
const drawBilingualSeal = () => {
	if (!sealCanvas.value) return;

	const canvas = sealCanvas.value;
	const ctx = canvas.getContext('2d');
	if (!ctx) return;

	// 清除画布
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	const centerX = canvas.width / 2;
	const centerY = canvas.height / 2;

	// 绘制外边框
	ctx.lineWidth = outerBorder.value * sealScale.value;
	ctx.strokeStyle = sealColor.value;
	ctx.beginPath();
	ctx.arc(centerX, centerY, 78 * sealScale.value, 0, Math.PI * 2);
	ctx.stroke();
	ctx.save();

	// 绘制内边框
	if (showInnerBorder.value) {
		ctx.lineWidth = innerBorder.value * sealScale.value;
		ctx.strokeStyle = sealColor.value;
		ctx.beginPath();
		ctx.arc(centerX, centerY, 63 * sealScale.value, 0, Math.PI * 2);
		ctx.stroke();
		ctx.save();
	}

	// 绘制中心内容
	drawCenterContent(ctx, centerX, centerY);

	// 绘制章名
	ctx.font = `${sealTextFontWeight.value} ${sealTextFontSize.value * sealScale.value}px ${sealTextFont.value}`;
	ctx.textBaseline = 'middle';
	ctx.textAlign = 'center';
	ctx.fillStyle = sealColor.value;
	ctx.fillText(sealText.value, centerX + sealTextLeft.value, centerY + 50 * sealScale.value + sealTextTop.value);

	// 绘制中文公司名称
	ctx.translate(centerX, centerY);
	ctx.font = `${companyFontWeight.value} ${companyFontSize.value * sealScale.value}px ${companyFont.value}`;

	const companyChars = companyName.value.split('');
	const charCount = companyChars.length;
	const angle = (4 * Math.PI) / (3 * (charCount - 1));

	for (let i = 0; i < charCount; i++) {
		const char = companyChars[i];
		if (i === 0) {
			ctx.rotate((5 * Math.PI) / 6);
		} else {
			ctx.rotate(angle);
		}
		ctx.save();
		ctx.translate(52 * sealScale.value + companyFontBorder.value, 0);
		ctx.rotate(Math.PI / 2);
		ctx.fillText(char, 0, 5);
		ctx.restore();
	}

	// 绘制英文名称
	ctx.translate(centerX - 80 * sealScale.value, centerY - 80 * sealScale.value);
	ctx.font = `${englishFontWeight.value} ${englishFontSize.value * sealScale.value}px ${englishFont.value}`;

	const englishChars = englishName.value.split('');
	const englishCount = englishChars.length;
	const englishAngle = (5 * Math.PI) / (3.34 * englishCount);

	for (let j = 0; j < englishCount; j++) {
		const char = englishChars[j];
		if (j === 0) {
			ctx.rotate((6.5 * Math.PI) / 7 - 1);
		} else {
			ctx.rotate(englishAngle);
		}
		ctx.save();
		ctx.translate(74 * sealScale.value + englishFontBorder.value, 0);
		ctx.rotate(Math.PI / 2);
		ctx.fillText(char, 0, 4.8);
		ctx.restore();
	}

	// 绘制防伪码
	ctx.font = `${securityFontWeight.value} ${securityFontSize.value * sealScale.value}px ${securityFont.value}`;
	const securityChars = securityCode.value.split('');
	const securityCount = securityChars.length;
	const securityAngle = (-4 * Math.PI) / ((10 - securityFontGap.value * 0.3) * (securityCount - 1));

	for (let i = 0; i < securityCount; i++) {
		const char = securityChars[i];
		if (i === 0) {
			ctx.rotate(((2.9 + securityRotate.value * 0.05) * Math.PI) / 6);
		} else {
			ctx.rotate(securityAngle);
		}
		ctx.save();
		ctx.translate(64 * sealScale.value + securityBorder.value, 0);
		ctx.rotate((-90 * Math.PI) / 180);
		ctx.fillText(char, 0, 5);
		ctx.restore();
	}

	ctx.restore();
	drawNoisy(ctx, canvas);

	// 生成图片数据
	sealDataURL.value = canvas.toDataURL('image/png');

	// 仅更新图片数据，不触发外部事件
	// nextTick(() => {
	// 	emit('change', currentSealData.value);
	// });
};

// 下载印章
const downloadSeal = () => {
	if (!sealDataURL.value) {
		ElMessage.error('请先生成印章！');
		return;
	}

	const link = document.createElement('a');
	link.download = `${sealName.value}-${Date.now()}.png`;
	link.href = sealDataURL.value;
	link.click();
};

// 确认生成印章
const handleConfirm = () => {
	// 检查是否有印章图片
	if (!sealDataURL.value) {
		ElMessage.error('请先生成印章！');
		return;
	}

	// 检查必要的数据
	if (!companyName.value.trim()) {
		ElMessage.error('请输入公司名称！');
		return;
	}

	if (!sealText.value.trim()) {
		ElMessage.error('请输入章名！');
		return;
	}
	showSealGenerated.value = true;
	// 组装最终数据
	const finalData = {
		...currentSealData.value,
		id: props.modelValue?.id || undefined,
		createdAt: props.modelValue?.createdAt || new Date().toISOString(),
		updatedAt: new Date().toISOString(),
	};

	// 触发更新和确认事件
	emit('update:modelValue', finalData);
	emit('confirm', finalData);
};

// 取消操作
const handleCancel = () => {
	emit('cancel');
};

// 组件挂载后初始化
onMounted(() => {
	// 初始化数据
	initializeData();

	nextTick(() => {
		// 根据当前模式生成印章
		if (showEnglish.value) {
			createBilingualSeal();
		} else {
			createChineseSeal();
		}
	});
});

// 监听props变化，重新初始化数据
watch(
	() => props.modelValue,
	(newValue) => {
		if (newValue) {
			initializeData();
			nextTick(() => {
				if (showEnglish.value) {
					createBilingualSeal();
				} else {
					createChineseSeal();
				}
			});
		}
	},
	{ deep: true }
);

// 监听印章名称和类型变化
watch(
	() => [props.sealName, props.sealType],
	([newSealName, newSealType]) => {
		if (newSealName && newSealName !== companyName.value) {
			companyName.value = newSealName;
		}
		if (newSealType) {
			switch (newSealType) {
				case '公章':
					sealText.value = '公章';
					break;
				case '财务章':
					sealText.value = '财务专用章';
					break;
				case '合同章':
					sealText.value = '合同专用章';
					break;
				case '法人章':
					sealText.value = '法人章';
					break;
				case '部门章':
					sealText.value = '部门章';
					break;
				case '发票章':
					sealText.value = '发票专用章';
					break;
				case '人事章':
					sealText.value = '人事专用章';
					break;
				case '其他章':
					sealText.value = '专用章';
					break;
				default:
					sealText.value = '专用章';
			}
		}
		// 自动更新印章
		nextTick(() => {
			updateSeal();
		});
	},
	{ immediate: true }
);
</script>

<style scoped>
.seal-generator {
	width: 100%;
	min-height: 600px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	}
	font-family:
		'SF Pro Display',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		'PingFang SC',
		'Hiragino Sans GB',
		'Microsoft YaHei',
		'Helvetica Neue',
		Helvetica,
		Arial,
		sans-serif;
	overflow: hidden;
}

/* 头部区域 */
.header-area {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: rgba(30, 30, 30, 0.95);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	}
}

.page-title h2 {
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;
	background: linear-gradient(45deg, #667eea, #764ba2);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: linear-gradient(45deg, #4f9eff, #7c3aed);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.page-title .subtitle {
	font-size: 12px;
	color: #7f8c8d;
	margin: 0;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
	}
}

.seal-actions {
	display: flex;
	gap: 12px;
}

.seal-actions .el-button {
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 8px 16px;
	font-size: 13px;
}

.seal-actions .el-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 主体内容区域 */
.main-content {
	display: flex;
	height: calc(600px - 60px);
}

/* 左侧配置区域 */
.config-area {
	width: 320px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-right: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: rgba(30, 30, 30, 0.95);
		border-right: 1px solid rgba(255, 255, 255, 0.1);
	}
}

/* 标签页样式 */
.config-tabs {
	height: 100%;
	display: flex;
	flex-direction: column;
}

:deep(.el-tabs__header) {
	margin: 0;
	padding: 12px 12px 0;
	background: rgba(248, 250, 252, 0.8);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: rgba(40, 40, 40, 0.8);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
}

:deep(.el-tabs__nav-wrap) {
	padding: 0;
}

:deep(.el-tabs__item) {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	border-radius: 4px 4px 0 0;
	margin-right: 3px;
	transition: all 0.3s ease;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
	}
}

:deep(.el-tabs__item.is-active) {
	background: white;
	color: #667eea;
	border-bottom: 2px solid #667eea;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #2a2a2a;
		color: #4f9eff;
		border-bottom: 2px solid #4f9eff;
	}
}

:deep(.el-tabs__item:hover) {
	color: #667eea;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #4f9eff;
	}
}

:deep(.el-tabs__active-bar) {
	display: none;
}

:deep(.el-tabs__content) {
	flex: 1;
	padding: 0;
	overflow: hidden;
}

:deep(.el-tab-pane) {
	height: 100%;
}

.tab-content {
	height: 100%;
	overflow-y: auto;
	padding: 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.tab-content::-webkit-scrollbar {
	width: 4px;
}

.tab-content::-webkit-scrollbar-track {
	background: transparent;
}

.tab-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* 配置区块 */
.config-section {
	margin-bottom: 12px;
	background: white;
	border-radius: 6px;
	padding: 12px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #2a2a2a;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

.config-section:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #f1f5f9;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #e5e5e5;
		border-bottom: 1px solid #404040;
	}
}

.section-icon {
	font-size: 14px;
	margin-right: 5px;
}

.config-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.config-row {
	display: flex;
	gap: 8px;
}

.config-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.config-label {
	font-size: 11px;
	font-weight: 500;
	color: #6b7280;
	margin-bottom: 1px;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
	}
}

/* 右侧预览区域 */
.preview-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: rgba(30, 30, 30, 0.95);
	}
}

.preview-header {
	padding: 12px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-header h3 {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #e5e5e5;
	}
}

.preview-info {
	display: flex;
	gap: 16px;
}

.info-item {
	font-size: 11px;
	color: #7f8c8d;
	background: #f8f9fa;
	padding: 3px 8px;
	border-radius: 12px;
	font-weight: 500;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
		background: #404040;
	}
}

.preview-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	position: relative;
}

.canvas-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #2a2a2a;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

.canvas-wrapper:hover {
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.canvas-wrapper::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
	border-radius: 18px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.canvas-wrapper:hover::before {
	opacity: 0.1;
}

canvas {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.preview-footer {
	padding: 12px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	text-align: center;
}

.operation-tips {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tip-text {
	margin: 0;
	font-size: 12px;
	color: #909399;
	display: flex;
	align-items: center;
	gap: 6px;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
	}
}

.tip-text.success {
	color: #67c23a;
}

.tip-text i {
	font-size: 14px;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input) {
	border-radius: 6px;
}

:deep(.el-input--small .el-input__wrapper) {
	padding: 0 6px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #404040;
		border: 1px solid #555;
		color: #e5e5e5;
	}
}

:deep(.el-input--small .el-input__wrapper:hover) {
	border-color: #667eea;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		border-color: #4f9eff;
	}
}

:deep(.el-input--small .el-input__wrapper.is-focus) {
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		border-color: #4f9eff;
		box-shadow: 0 0 0 2px rgba(79, 158, 255, 0.2);
	}
}

:deep(.el-select) {
	width: 100%;
}

:deep(.el-select--small .el-input__wrapper) {
	height: 24px;
	border-radius: 4px;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #404040;
		border: 1px solid #555;
		color: #e5e5e5;
	}
}

:deep(.el-input-number) {
	width: 100%;
}

:deep(.el-input-number--small) {
	width: 100%;
}

:deep(.el-input-number--small .el-input__wrapper) {
	height: 24px;
	border-radius: 4px;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #404040;
		border: 1px solid #555;
		color: #e5e5e5;
	}
}

:deep(.el-checkbox) {
	margin-left: 8px;
	font-size: 12px;
}

:deep(.el-checkbox__label) {
	font-size: 12px;
	color: #6b7280;
	padding-left: 4px;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		color: #a0a0a0;
	}
}

:deep(.el-checkbox__input) {
	line-height: 1;
}

:deep(.el-color-picker) {
	width: 100%;
}

:deep(.el-color-picker--small) {
	width: 100%;
}

:deep(.el-color-picker--small .el-color-picker__trigger) {
	width: 100%;
	height: 24px;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		background: #404040;
		border: 1px solid #555;
	}
}

:deep(.el-color-picker--small .el-color-picker__trigger:hover) {
	border-color: #667eea;

	/* 暗黑模式样式 */
	@media (prefers-color-scheme: dark) {
		border-color: #4f9eff;
	}
}

/* Element Plus 下拉选项暗黑模式样式 */
:deep(.el-select-dropdown) {
	@media (prefers-color-scheme: dark) {
		background: #2a2a2a;
		border: 1px solid #555;
	}
}

:deep(.el-select-dropdown__item) {
	@media (prefers-color-scheme: dark) {
		color: #e5e5e5;
	}
}

:deep(.el-select-dropdown__item:hover) {
	@media (prefers-color-scheme: dark) {
		background: #404040;
	}
}

:deep(.el-select-dropdown__item.selected) {
	@media (prefers-color-scheme: dark) {
		background: #4f9eff;
		color: #fff;
	}
}

/* 按钮暗黑模式样式 */
:deep(.el-button) {
	@media (prefers-color-scheme: dark) {
		background: #404040;
		border: 1px solid #555;
		color: #e5e5e5;
	}
}

:deep(.el-button:hover) {
	@media (prefers-color-scheme: dark) {
		background: #505050;
		border-color: #666;
	}
}

:deep(.el-button--primary) {
	@media (prefers-color-scheme: dark) {
		background: #4f9eff;
		border-color: #4f9eff;
		color: #fff;
	}
}

:deep(.el-button--primary:hover) {
	@media (prefers-color-scheme: dark) {
		background: #5aa9ff;
		border-color: #5aa9ff;
	}
}

:deep(.el-button--success) {
	@media (prefers-color-scheme: dark) {
		background: #67c23a;
		border-color: #67c23a;
		color: #fff;
	}
}

:deep(.el-button--success:hover) {
	@media (prefers-color-scheme: dark) {
		background: #85ce61;
		border-color: #85ce61;
	}
}

:deep(.el-button--info) {
	@media (prefers-color-scheme: dark) {
		background: #909399;
		border-color: #909399;
		color: #fff;
	}
}

:deep(.el-button--info:hover) {
	@media (prefers-color-scheme: dark) {
		background: #a6a9ad;
		border-color: #a6a9ad;
	}
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.config-area {
		width: 300px;
	}

	.tab-content {
		padding: 10px;
	}

	.preview-container {
		padding: 15px;
	}
}

@media (max-width: 768px) {
	.main-content {
		flex-direction: column;
	}

	.config-area {
		width: 100%;
		max-height: 50vh;
	}

	.header-area {
		flex-direction: column;
		gap: 16px;
		text-align: center;
		padding: 16px 20px;
	}

	.preview-container {
		padding: 20px;
	}

	.canvas-wrapper {
		padding: 20px;
	}

	:deep(.el-tabs__item) {
		padding: 6px 12px;
		font-size: 12px;
	}

	.config-section {
		padding: 12px;
		margin-bottom: 12px;
	}

	.section-title {
		font-size: 13px;
		margin-bottom: 10px;
	}
}

/* 动画效果 */
.config-section {
	animation: slideInLeft 0.4s ease-out;
}

.config-section:nth-child(1) {
	animation-delay: 0.05s;
}
.config-section:nth-child(2) {
	animation-delay: 0.1s;
}
.config-section:nth-child(3) {
	animation-delay: 0.15s;
}
.config-section:nth-child(4) {
	animation-delay: 0.2s;
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.canvas-wrapper {
	animation: fadeInUp 0.6s ease-out 0.2s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tab-content {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>
